现在免费的、开源的博客系统已经有许多，并且提供丰富的功能和模板，让我挑花了眼。 最终我决定自己搭建一个功能单一的轻博客。 这个文章系列会介绍我是一步一步如何搭建一个轻博客的。 如果你已经具备了一些简单的前端开发的知识，那么就可以轻松理解这里的文章并搭建属于自己的博客。

为什么用Github Pages

• 它是免费的。
• 使用git代替ftp上传页面，便于页面管理，而且更酷。
• 虽然只提供静态页面的托管，但是对于建立一个轻博客足够。

注册Github Pages

去Github Pages会看到详细的向导，介绍如何创建一个托管页面的仓库。 当然，创建仓库的前提已经注册了Github的账号。 登录Github后创建一个仓库，值得一提的是仓库的名称必须是username.github.io的格式。 可能有些人看到这个还是不清楚怎么命名仓库。 这里举个栗子，我的Github用户名是leehooi，那么仓库的名称就是leehooi.github.io，创建好的git仓库地址就是https://github.com/leehooi/leehooi.github.io.git。

创建第一个页面

仓库创建好了之后，在本地电脑由仓库地址(https://github.com/leehooi/leehooi.github.io.git)克隆一个本地仓库。 在本地仓库根目录创建一个index.html的文件，里面随便写几个字符。 完成后提交并且push。 在浏览器输入网址leehooi.github.io便可以看到网址首页里面是刚才输入的几个字符。

至此，博客的原型已经完成，并且可以在其他地方通过互联网访问了(虽然没人想访问这样简陋的网站)。

后面的系列会介绍如何自动生成html。

Github Pages能够将我们的页面展示在互联网上。 虽然页面内容由我们来决定，但是所有页面都需要手动去写很不现实。 Github Pages官方推荐了使用Jekyll来生成博客。 这时一个ruby环境的静态博客生成工具，感兴趣的朋友可以了解一下。

作为前端开发，nodejs和JavaScript是比较常用的工具和语言，用起来会更顺手。

经过一番查找，发现hexo是一款基于Node.js的静态博客框架。 安装使用了一番，感觉不适合我搭建轻博客的初衷。 原因是自己的想法会被框架束缚(比如我想对生成文章的地址进行定制，使用本地图片等等)。 想要按照自己的意愿来只能通过配置或在hack。

使用Jade模板语言

Jade的官方介绍：

Jade is a terse language for writing HTML templates.

• Produces HTML
• Supports dynamic code
• Supports reusability (DRY)

简练、支持动态代码，对于生成博客页面最合适不过。

比如index.jade的文件内容如下：

div !{content}
ul
  each val in [1, 2, 3, 4, 5]
    li= val

generate.js的代码：

var jade = require('jade');
var fs = require('fs');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var html = fn({ 'content': '<span>hello</span>' });

fs.writeFileSync('index.html', html);

命令行执行：

node generate.js

生成的index.html内容：

<div><span>hello</span></div>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

静态博客生成器

上面的代码片段足以证明，使用jade是能够支持生成静态博客这个想法的。

接下来需要完善的是：

1. 完善generate.js代码。content的内容应该是从文件中读取，而不是hardcode在代码中。
2. 完善index.jade文件。让你的页面看上去更完整、生动。

想要你的博客更加个性化？ 为你的博客配置一个属于自己的域名吧。 当购买了心仪的域名后，阅读这篇文章，介绍如何使用自己的域名访问博客。 我购买的域名是lihui.io。 下面介绍如何绑定这个域名到我的Github Pagse，以便在浏览器输入 http://lihui.io 就能访问我的博客。

1 配置Github Pagse

在Github Pagse的仓库页面，点击Settings进入配置页面。 在页面中找到Custom domain区域，在里面输入要配置的域名，然后点击Save。

这里可以输入的域名分为三种：

1. 一级域名：lihui.io
2. www二级域名：www.lihui.io
3. 自定义二级域名，比如blog.lihui.io

这三种的域名解析配置不太一下，下面会介绍。

2 配置域名解析

在购买域名的供应商网站，进入到域名管理界面，找到配置域名解析的页面。 不同的供应商页面会有所不同，但大致功能是类似的。

2.1 lihui.io 或 www.lihui.io 的配置

根据Github的帮助信息，这两种域名的配置类似，需要为要配置的域名添加一条ALIAS或ANAME或A解析记录。

ALIAS和ANAME的配置类似：

• 选定记录类型后，记录值输入原来的域名leehooi.github.io。
• 如果是lihui.io，那么主机记录输入@。
• 如果是www.lihui.io，那么主机记录输入www。

但是有一些供应商并不支持ALIAS和ANAME的记录类型。

那么只能用A类型：

• 选定记录类型为A。
• 记录值需要输入一个IP地址。 Github提供了192.30.252.153和192.30.252.153两个IP地址，并要求为这两个IP分别添加一条记录。 具体参考Github的帮助。

配置完解析记录就可以通过新域名访问了。

如果同时配置了lihui.io和www.lihui.io的域名：

• 当访问www.lihui.io时，Github会自动跳转到lihui.io。
• 如果Github Pagse中配置的域名是www.lihui.io， 那么当访问lihui.io时，Github会自动跳转到www.lihui.io。

2.2 blog.lihui.io 的配置

自定义二级域名需要配置一条CNAME类型的记录。

主机记录输入blog。

记录值输入leehooi.github.io。

至此域名的配置已经完成了。 配置完成后新域名不一定立刻生效，因为DNS的更新需要一定时间，一般几个小时之内就能访问了。

第2节中介绍了使用jade作为模板引擎生成html页面文件。

回顾一下generate.js的代码：

var jade = require('jade');
var fs = require('fs');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var html = fn({ 'content': '<span>hello</span>' });

fs.writeFileSync('index.html', html);

content的html片段可以是从文件中读取。

但是用html直接来写博客，内容的排版很不方便。

Markdown

Markdown是一种轻量级的标记语言，简练的语法用来写作博客、排版很方便。

marked可以帮助我们将markdown翻译为html。

安装marked：

npm install marked --save

使用也很简单：

var marked = require('marked');
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>

因此，之前的generate.js可以修改为如下：

var jade = require('jade');
var fs = require('fs');
var marked = require('marked');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var content = fs.readFile('blog.md');

var html = fn({ 'content': marked(content) });

fs.writeFileSync('index.html', html);

其中blog.md文件里面是使用markdown写作好的博客文章。 使用marked转换为html片段后，再使用jade模板生成完整的html页面。

为你博客中的代码片段着色。

Markdown中本身支持代码片段的语法，生成的html用<code>标签包围。 但是代码颜色没有高亮显示。

highlight.js

要实现代码高亮可以使用highlight.js

安装highlight.js:

npm install highlight.js --save

使用highlight.js:

var fs = require('fs');
var markdown = require('marked');
var hljs = require('highlight.js');

markdown.setOptions({
    highlight: function (code, lang) {
        return hljs.highlight(lang, code).value;
    }
});

var content = fs.readFile('blog.md');
var html = markdown(content);

代码高亮后的html在浏览的时候发现并没有被着色，但是发现代码里的关键字都被设置了样式。 所以定义好样式的颜色就能看到着色后的代码了。

highlight.js官方也提供了一些样式表，可以到这里选取一个来使用。